<template>
  <app-layout>
    <div class="monitor_index">
      <div class="monitor_header">
        <MonitorSearch @reconnect="reconnect()"/>
      </div>
      <div class="monitor_content">
        <MatchIndex />
        <PictureIndex />
        <MymonitorIndex />
      </div>
    </div>

    <DialogIndex v-if="monitorstore.state.matchdialog.data.length > 0" />
    <MonitorDialog v-model="monitorstore.state.showmonitordialog" />
    <MonitorMatch v-if="monitormessages.length > 0 && monitormessagesShow" :medata="monitormessages"
      @remove="removemess" />
  </app-layout>
</template>

<script setup>
import { useMonitorStore } from "./monitor-store.js";
import { http } from '@/utils/http'
import MonitorSearch from "./component/MonitorSearch.vue";
import MatchIndex from "./component/match/index.vue";
import PictureIndex from "./component/picture/index.vue";
import MymonitorIndex from "./component/mymonitor/index.vue";

import MonitorMatch from "./component/dialog/MonitorMatch.vue";

import DialogIndex from "./component/dialog/index.vue";

import MonitorDialog from "./component/dialog/MonitorDialog.vue";

import WS from '@/utils/ws.js'

const monitorstore = useMonitorStore();

const monitormessages = ref([])
const monitormessagesShow = ref(true)
const audio = new Audio()
provide("MonitorStore", {
  monitorStore: monitorstore,
  monitorState: monitorstore.state,
});

const intervalId = ref(null)

const isMounted = ref(false)
const ws = new WS({
  url: `ws://ws.new-api.dui-xian.com/info/message/`,
  onMessage(data) {
    if (data.type == 'zhishu_filter') {
      monitorstore.state.filterData = data.data
    }
    if (data.type == 'up_down') {
      monitorstore.state.editionData = data.data
    }
    if (data.type == 'monitoring') {
      monitorstore.state.monitordata = data.data

    }
    if (data.type == 'picture_data') {
    }
    if (data.type == 'collector') {
      monitorstore.state.collectordata = data.data
    }

    if (data.type == 'monitoring_pop') {
      if (data.data.length > 0) {
        monitormessages.value.push(...data.data);
        audio.src = 'http://tools.app.qubit-dance.com/sound/msg.mp3'
          audio.play()
        
      }

    }
  },
})

const removemess = () => {
  monitormessagesShow.value = false
  let a = monitormessages.value.slice(1)
  setTimeout(() => {
    monitormessagesShow.value = true
  }, 500);
  
  monitormessages.value = a
}

const reconnect = () => {
  console.log('reconnect');
  
  ws.sendping()
}

const getpicturedata = () => {
  clearInterval(intervalId.value)
  if (isMounted.value) {
    http.get(`/zhishu/get_picture_data?_=${Date.now()}`).then((res) => {
    monitorstore.state.picturedata = res
    monitorstore.refactPicturedata()
    // intervalId.value = setInterval(() => getpicturedata(), 5000)

  }).catch(() => {
    // intervalId.value = setInterval(() => getpicturedata(), 5000)
  })
  }
  
}

onMounted(() => {
  isMounted.value = true
  monitorstore.refactPicturedata()
  monitorstore.state.search_form = {
    bc_type: 'all',
    date: 'all',
    pk_types: ['R', 'OU'],
    league_id: 'all',
    match_id: 'all',
    home_id: '',
    away_id: '',
    hours: 24,
    order_by: 1
  }
  monitorstore.getsavefilter()
  // intervalId.value = setInterval(() => getpicturedata(), 5000)
  // getpicturedata()
})

onUnmounted(() => {
  isMounted.value = false
  clearInterval(intervalId.value)
  ws.close()
})
</script>

<style lang="scss" scoped>
.monitor_index {
  height: calc(100% - 16px);
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.monitor_header {
  height: 32px;
  margin-bottom: 16px;
}

.monitor_content {
  display: flex;
  height: calc(100% - 64px);
}
</style>

<style>
.flex_column {
  display: flex;
  flex-direction: column;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hidden1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.font12 {
  color: #000;
  font-size: 12px;
}

.bold {
  font-weight: bold;
}

.monitor_index .el-table .el-table__cell {
  padding: 3px 0;
}
</style>